<template>
	<div class="order-main">
		<radio-group class="head-bar" @change="headChange">
			<label class="label" :class="{ active: item.value == current }" v-for="(item, index) in headItems" :key="item.value">
				<radio :value="item.value" :checked="item.value === current" />
				<view>{{ item.name }}</view>
			</label>
		</radio-group>

		<div class="card-list">
			<!-- orderId 是后台针对每一个订单生成的 所以订单列表 不会重复 可以作为 key
					但是退单列表 可能存在 两个退单都是来自于同一个订单  所以会存在 orderId重复的问题 导致报错
				  -->
			<div class="card" v-for="item in orderListCom" :key="item._key || item.orderId">
				<div class="order-title">
					<text>订单编号: {{ item.order.orderSn }}</text>
					<text class="status" v-if="current != 9">{{ orderStatusText }}</text>
					<text class="status" v-if="current == 9"  @tap="goBackInfo(item.items[0])">
						<span v-if="item.order.status == 2" style="color: red;">{{ orderProcessText(item.order.status) }}</span>
						<span v-if="item.order.status == 3" style="color: red;">{{ orderProcessText(item.order.status) }}</span>
						<span v-if="item.order.status == 0 || item.order.status == 1 || item.order.status == 9">{{ orderProcessText(item.order.status) }}</span>
					</text>
				</div>
				<!-- skublock -->
				<div class="sku-block" v-for="(sku, index) in item.items" :key="index">
					<navigator :url="'../../kind/detail/index?productId=' + sku.productId">
						<image class="img" :src="sku.productPic" mode=""></image>
					</navigator>
					<div class="info">
						<div class="p1">
							<text class="title">{{ sku.productName }}</text>
							<!-- 后台需要添加skuprice -->
							<text class="price">¥{{ sku.productPrice  }}</text>
						</div>
						<div class="p2">
							<!-- 是商品编号,非商品id!! -->
							<text>编号：{{ sku.productSn }}</text>
							<text>x {{ sku.productQuantity }}</text>
						</div>
						<div class="p3">
							<view>
								规格：<br />
								<text style="margin-right: 10rpx;" v-for="(ele,idx) in sku.productAttr" :key="idx">{{ ele.key }} : {{ ele.value }}
								</text>

							</view>
						</div>
						<div v-show="item.order.status == 2" class="p4">
							<text v-if="sku.isReturn == 0" @tap="goOrderBack(sku)">退货</text>
							<!-- <text style="color: red;" v-else>退货中</text> -->
							<text  v-if="sku.isReturn == 1"  style="color: red;" >退货中</text>
						</div>
					</div>

				</div>
				<div class="total-price">
					<table>
						<template v-if="item.orderType == 'back'">
							处理
						</template>
						时间: {{ item.order.createTime }}
					</table>
					<text>合计: ¥{{ item.order.totalAmount }}</text>
				</div>
				<!-- buttons -->
				<div class="btns">
					<div class="btn btn-cancel-order" @click="cancleOrder(item.order.id)" v-if="current == 0">取消订单</div>
					<div class="btn btn-pay" @click="goPay(item)" v-if="current == 0">付款</div>
					<div class="btn btn-receive" @click="allDone(item)" v-if="current == 2">确认收货</div>
					<!-- 不能在这里退货 退货可以针对单独的sku处理 而不是整个订单 -->
					<!-- <div class="btn btn-receive" @click="goOrderBack(item)" v-if="current == 2">申请退款</div> -->
					<div class="btn btn-closed" @tap="del(item)" v-if="item.order.status == 4">订单已关闭,删除记录</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import orderApi from '@/api/order/index';
	import {
		isLogin,
		checkLogin
	} from '@/utils/common.js';
	import mix from "@/mixins/index.js"
	export default {
		name: 'OrderList',
		mixins: [mix],
		data() {
			return {
				orderList: [],
				// process 进度: 0 等待处理 ; 1 确认退货,等待收货; 2 : 确认收货,已退款 ; 9 : 拒绝退货
				orderBackList: [],
				current: '1',
				backList: [],
				// <!-- 订单状态  1 已付款 ;  2 已发货; 3: 已收货;   9 申请退款 -->
				headItems: [{
						name: '待付款',
						value: '0'
					},
					{
						name: '已付款',
						value: '1'
					},
					{
						name: '已发货',
						value: '2'
					},
					{
						name: '已收货',
						value: '3'
					},
					{
						name: '申请退款',
						value: '9'
					}
				],
				orderListLocal: [] // 未支付订单
			};
		},
		onLoad(option) {
			this.current = option.type;
			// if(this.isLogin){
				this.findAllOrders();
				this.orderReturnApplys()
			// }
		},
		computed: {
			orderListCom() {
				// 如果当前状态是9  所以是退单请求
				if (this.current == 9) {
					// 退单数据应该变形
					return this.getOrderBackList();
				}
				if (this.current == 3) {
					return this.orderList.filter(item => item.order.status == 3 || item.order.status == 4);
				}
				// 返回的订单数据 无需变形
				return this.orderList.filter(item => item.order.status == this.current);
			},
			orderStatusText() {
				var text = '未付款';
				switch (this.current) {
					case '0':
						text = '未付款';
						break;
					case '1':
						text = '等待发货';
						break;
					case '2':
						text = '已发货';
						break;
					case '3':
						text = '已收货';
						break;
					default:
						break;
				}
				return text;
			}
			 
		},
		onBackPress() {
			uni.switchTab({
				url: '/pages/mine/index'
			});
			return true;
		},
		methods: {
			goBackInfo(sku){
				
					uni.navigateTo({
						url:`/pages/mine/order/orderback/backInfo?backOrder=${sku.returnId}`
					})
			},
			async del(val) {
				var res = await orderApi.deleteOrder(val.order.id);
				if (res.success) {
					uni.showToast({
						title: "删除成功"
					})
				} else {
					uni.showToast({
						title: "删除失败",
						icon: "none"
					})
				}
			},
			async findAllOrders() {

				// 通过网络获取orderList
				var res = await orderApi.findAllOrders();

				res.data.orderList.forEach(ele => {
					ele.items.forEach(ite => {
						if (ite.productAttr != "string") {
							ite.productAttr = JSON.parse(ite.productAttr);
						}

					})
				})
				this.orderList = res.data.orderList;
			},
			async orderReturnApplys() {
				var res = await orderApi.orderReturnApplys();

				this.backList = res.data.items
			},
			headChange(e) {
				this.current = e.detail.value;
				window.location.hash = '#/pages/mine/order/index?type=' + this.current;
			},
			//取消未支付订单
			cancleOrder(orderId) {
				orderApi
					.cancelOrder(orderId)
					.then(res => {
						if (res.success) {
							uni.showToast({
								title: '取消订单成功!',
								duration: 1000
							});
							this.findAllOrders();
						} else {
							uni.showToast({
								title: '取消订单失败!',
								duration: 1000
							});
						}
					});
			},
			// 去支付
			goPay(val) {
				uni.navigateTo({
					url: '/pages/mine/order/detail/index?id=' + val.order.id
				});
			},
			//确认收货
			allDone(orderId) {
				orderApi
					.allDone({
						orderId: orderId.order.id
					})
					.then(res => {
						if (res.success) {
							uni.showToast({
								title: '确认收货成功!',
								duration: 1000
							})
							this.findAllOrders();
						} else {
							uni.showToast({
								title: '确认收货失败!',
								duration: 1000,
								icon: "none"
							})
						}
					});
			},
			 
			goOrderBack(sku) {
				uni.navigateTo({
					url:`/pages/mine/order/orderback/index?backOrder=${JSON.stringify(sku)}`
				})
				// 本来order.items 这里获取order.items[n] 因为同一个订单可能有多个商品,但一次只能退一件商品
				
				// 去往退货确认页 用vuex换过去
				// var order = this.orderList.find(item => item.id == orderId);
				// order.item = sku
				// delete order.items
				// this.$store.commit('order/ADD_TEMP_ORDER_BACK',order);
				// uni.navigateTo({
				// 		// 这里建议用vuex换过去
				// 		url: `./orderback/index`
				// });
				 
			},
			 
			getOrderBackList(){
				// 这里构建退单列表  和订单列表保持一致
				var rsBackList = [];
				for(var i = 0 ; i < this.backList.length ; i ++){
					var backObj = this.backList[i];
					var order  = {
						backId: backObj.id,
						id: backObj.orderId,
						orderSn: backObj.orderSn,
						status: backObj.status,
						totalAmount:backObj.returnAmount,
						productRealPrice: backObj.productRealPrice,
						createTime:backObj.createTime
					}
					// 对 这里只有一个item
					
					var items = [{
						id: backObj.orderItemId,
						createTime: backObj.createTime,
						productPic: backObj.productPic,
						productBrand: backObj.productBrand,
						productAttr: backObj.productAttr,
						productCount: backObj.productCount,
						productName:backObj.productName,
						productPrice:backObj.productPrice,
						productSn:backObj.productSn,
						productQuantity:backObj.productCount,
						productAttr:JSON.parse(backObj.productAttr),
						totalAmount:backObj.productPrice,
						productId:backObj.productId,
						returnId:backObj.id
					}]
					rsBackList.push({
						order,
						items
					})
				}
				return rsBackList;

			},

			orderProcessText(process) {
				var text = '等待处理';
				switch (JSON.stringify(process)) {
					case '0':
						text = '等待处理';
						break;
					case '1':
						text = '确认退货,等待发货';
						break;
					case '2':
						text = '已退款';
						break;
					case '3':
						text = '已拒绝';
						break;
					case '9':
						text = '拒绝退货';
						break;

					default:
						break;
				}
				return text;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.order-main {
		.head-bar {
			width: 100%;
			overflow-y: auto;
			position: fixed;
			left: 0;
			top: 0;
			// #ifdef H5
			top: 80rpx;
			// #endif
			display: flex;
			justify-content: space-around;
			width: 100%;
			height: 62rpx;
			padding-top: 14rpx;
			background-color: #354e44;
			color: #fff;
			font-size: 30rpx;
			line-height: 62rpx;
			z-index: 999;

			.label {
				radio {
					display: none;
				}

				&.active {
					border-bottom: 2rpx solid #dd524d;
					color: #dd524d;
				}
			}
		}

		.card-list {
			margin-top: 130rpx;

			.card {
				width: 672rpx;
				box-sizing: border-box;
				padding: 36rpx;
				border-radius: 24rpx;
				background-color: #fff;
				margin: 30rpx auto;
				font-size: 24rpx;
				color: #3e3e3e;

				.order-title {
					line-height: 33rpx;
					display: flex;
					justify-content: space-between;

					.status {
						color: #034c46;
					}

					border-bottom: 1px solid #f1ece7;
					padding-bottom: 30rpx;
				}

				.sku-block {
					display: flex;
					justify-content: flex-start;
					border-bottom: 1px solid #f1ece7;
					padding: 30rpx 0;

					.img {
						width: 162rpx;
						height: 162rpx;
						flex-shrink: 0;
						background-color: #8f8f94;
					}

					.info {
						width: 470rpx;
						margin-left: 28rpx;

						.p1,
						.p2 {
							display: flex;
							justify-content: space-between;
							align-items: center;
						}

						.p1 {
							font-size: 26rpx;
							line-height: 37px;

							.title {
								color: #3e3e3e;
							}

							.price {
								colro: #8d8d8d;
							}
						}

						.p2,
						.p3 {
							font-size: 22rpx;
							color: #8d8d8d;
							line-height: 30rpx;
							margin-top: 5rpx;
						}

						.p4 {
							text-align: right;
							margin-top: 10rpx;
							color: #8d8d8d;
							text-decoration: underline;
						}
					}
				}

				.total-price {
					font-size: 26rpx;
					line-height: 37rpx;
					text-align: right;
					margin-top: 14rpx;
					display: flex;
					justify-content: space-between;
				}

				.btns {
					margin-top: 20rpx;
					display: flex;
					justify-content: flex-end;

					.btn {
						width: 124rpx;
						height: 50rpx;
						border: 1px solid #2d4f43;
						font-size: 26rpx;
						border-radius: 10rpx;
						color: #2d4f43;
						text-align: center;
						line-height: 50rpx;
						margin-left: 32rpx;

						&.btn-closed {
							width: auto;
							padding: 0 1em;
							border-color: #dd524d;
						}
					}
				}
			}
		}
	}
</style>
